<template>
  <div class="overdue_list">
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单号" clearable />
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="searchForm.shopName" placeholder="请输入供应商名称" clearable />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="searchForm.receivingName" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.receivingMobile" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="短信状态">
          <el-select v-model="searchForm.sendStatus" placeholder="全部" clearable>
            <el-option label="未发送" :value="1" />
            <el-option label="已发送" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="逾期天数">
          <div class="overdue_day_input">
            <el-input v-model="searchForm.min" style="width:80px" placeholder="0" clearable="val=>changeNumberInput('min',val)" />
            <span>至</span>
            <el-input v-model="searchForm.max" style="width:80px" placeholder="0" clearable="val=>changeNumberInput('max',val)" />
          </div>
        </el-form-item>
        <el-form-item label="预计扣款日">
          <my-date-picker ref="myDatePicker" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="danger" @click="search()">查询</el-button>
          <el-button size="small"  type="danger" plain @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="flex flex-between-center table-top-btns">
      <div class="flex align-center">
        <h5 class="flex align-center">
          <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
        </h5>
      </div>
      <div class="flex align-center">
        <p style="font-size:12px;color:#000000;margin-right: 10px;">
        <span>逾期总数量：{{ overdueCount }}条</span>
        <span style="margin-left:20px">逾期总金额：{{ overdueAmount }}元</span>
        </p>
        <el-tooltip class="item" effect="dark" content="一个账单一个月只能发送一次短信" placement="top-start">
          <el-button v-if="$hasMethod('#batchSend')" size="small" type="danger" plain @click="batchSend">
            <svg-icon icon-class="batch" :size="11" />批量发送短信
          </el-button>
        </el-tooltip>
        <el-button v-if="$hasMethod('#export')" size="small" icon="el-icon-upload2" type="danger" plain @click="exportFile">导出</el-button>
      </div>
    </div>
    <el-table ref="multipleTable" :data="tableData" :header-cell-style="{background:'#ffe3e2',color:'#E97170'}" row-key="id" border :tree-props="{ children: 'children' }">
      <el-table-column fixed align="center" type="selection" width="55" />
      <el-table-column fixed align="center" label="订单号">
        <template slot-scope="scope">
          <span class="blue-font pointer" @click="goToOrder(scope.row.trade_no)">{{ scope.row.trade_no }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="goods_title" label="商品名称" />
      <el-table-column align="center" label="第几期">
        <template slot-scope="scope">
          <span>({{ scope.row.which_period }})/{{ scope.row.month_total }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="租期" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.order_begin_time }}/{{ scope.row.order_end_time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="begin_time" label="预计扣款日" width="100" />
      <el-table-column align="center" prop="rent" label="账单金额" />
      <el-table-column align="center" prop="paid_rent" label="实付金额" />
      <el-table-column align="center" prop="withhold_num" label="扣款次数" />
      <el-table-column align="center" prop="cert_name" label="姓名" />
      <el-table-column align="center" prop="mobile" label="手机号" />
      <el-table-column align="center" prop="realname" label="收货人" />
      <el-table-column align="center" prop="prov" label="省" />
      <el-table-column align="center" prop="city" label="市" />
      <el-table-column align="center" prop="area" label="区/县" />
      <el-table-column align="center" prop="address" label="收货地址" width="120" />
      <el-table-column align="center" label="订单状态">
        <template slot-scope="scope">
          <span style="display:block;width: 10px;height: 10px;border-radius:50%;background-color: #E43C3A;position: relative;top: 17px;left: -5px;"></span>
          {{scope.row.statusName}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付状态">
        <template slot-scope="scope">
          <span style="display:block;width: 10px;height: 10px;border-radius:50%;background-color: #E43C3A;position: relative;top: 17px;left: -5px;"></span>
          <span>{{ scope.row.lease_status == 1 ? '已支付' : scope.row.lease_status == 2 ? '已退款' : scope.row.lease_status == 3 ? '已买断' : scope.row.lease_status == 4 ? '已逾期' : '未支付' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="overdue_days" label="逾期天数" />
      <el-table-column align="center" prop="buyout_breach" label="违约金和滞纳金" />
      <el-table-column align="center" prop="sms_num" label="发送次数" />
      <el-table-column align="center" width="100" label="短信状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.send_status == 1 ? 'danger' : 'success'">{{ scope.row.send_status == 1 ? '未发送' : '已发送' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" prop="shopname" label="供应商名称" />
      <el-table-column fixed="right" align="center" width="190" label="操作">
        <template slot-scope="scope">
          <el-button v-if="$hasMethod('#withhold')" style="margin-right:10px;background-color: #E43C3A;color: #fff;" size="mini" @click="withholdItem(scope.row.order_id, scope.row.lease_id)">发起代扣 </el-button>
          <el-dropdown v-if="$hasMethod('#viewRecord') || $hasMethod('#viewRemark')" @command="command => handleMore(command, scope.row)">
            <span class="el-dropdown-link blue-font pointer" style="margin-left:10px">
              ...
              <!-- <i class="el-icon-arrow-down el-icon--right" /> -->
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="$hasMethod('#viewRecord')" command="1">查看记录</el-dropdown-item>
              <el-dropdown-item v-if="$hasMethod('#viewRemark')" command="2">查看备注</el-dropdown-item>
              <el-dropdown-item command="3">{{scope.row.is_send==0?'发送短信通知':'已发送短信通知'}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <custom-page ref="customPage" :total="total" @getList="getList" />
    <view-dialog ref="viewDialog" :view-item="selectedItem" />
    <remark-dialog ref="remarkDialog" :order-id="selectedItem.order_id" :which-period="selectedItem.which_period" />
    <send-dialog ref="sendDialog" :order-id="selectedItem.order_id" :send-item="sendItem" />
  </div>
</template>

<script>
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
import { financeOverdueList, overdueListExport, manualWithholding, sendOverdueSms } from '@/api/finance'
import viewDialog from './view'
import remarkDialog from './remark'
import sendDialog from './send'
export default {
  components: { customPage, myDatePicker, viewDialog, remarkDialog, sendDialog },
  data() {
    return {
      searchForm: {
        orderNo: '',
        goodsName: '',
        shopName: '',
        receivingName: '',
        receivingMobile: '',
        sendStatus: '',
        min: '',
        max: '',
        leaseTime: ''
      },
      tableData: [],
      total: 0,
      overdueCount: 0,
      overdueAmount: 0,
      selectedItem: {}
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    batchSend() {
      const list = this.$refs.multipleTable.selection
      if (list.length === 0) {
        this.$message({
          message: '没有勾选项',
          type: 'warning'
        })
        return
      }
      const ids = list.map(k => k.lease_id).join(',')
      sendOverdueSms(ids).then(res => {
        this.getList()
      })
    },
    // 发起代扣
    withholdItem(orderId, leaseId) {
      this.$confirm('您确定要发起代扣吗？', '发起代扣', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        manualWithholding({ orderId, leaseId }).then(res => {
          setTimeout(() => {
            this.getList()
          }, 1000)
        })
      }).catch(() => { })
    },
    handleMore(command, item) {
      this.selectedItem = item
      if (command === '1') {
        // 查看记录
        this.$refs.viewDialog.dialogVisible = true
      } else if(command === '2') {
        // 查看备注
        this.$refs.remarkDialog.dialogVisible = true
      } else {
        this.sendItem=item
        // 发送买断通知
        if (item.is_send === 0) {
          this.$refs.sendDialog.dialogVisible = true
        } else {
          this.$message({
            message: '您已发过短信通知，请勿重复发送！',
            type: 'error'
          })
        }
        
      }
    },
    goToOrder(orderId) {
      if (orderId) {
        this.$router.push({ name: 'orderList', params: { orderId }})
      }
    },
    exportFile() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal === 'error') {
        return
      }
      this.searchForm.leaseTime = pickerVal
      const params = { ...this.searchForm }
      params.overdueDay = params.min && params.max ? params.min + '~' + params.max : ''
      delete params.min
      delete params.max
      overdueListExport(params)
    },
    changeNumberInput(key, value) {
      const pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式
      // 不符合正整数时
      if (!pattern.test(value)) {
        // input 框绑定的内容为空
        this.searchForm[key] = ''
      }
    },
    // 获取数据
    getList() {
      const { page, pageSize } = this.$refs.customPage
      const params = { ...this.searchForm }
      params.overdueDay = params.min && params.max ? params.min + '~' + params.max : ''
      delete params.min
      delete params.max
      financeOverdueList({
        page,
        pageSize,
        ...params
      }).then(res => {
        const { list: { data, total }, count: { overdueCount, overdueAmount }} = res
        this.tableData = data || []
        this.total = total || 0
        this.overdueCount = overdueCount
        this.overdueAmount = overdueAmount
      })
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal === 'error') {
        return
      }
      this.searchForm.leaseTime = pickerVal
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        orderNo: '',
        goodsName: '',
        shopName: '',
        receivingName: '',
        receivingMobile: '',
        sendStatus: '',
        min: '',
        max: '',
        leaseTime: ''
      }
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.overdue_day_input {
  border-radius: 4px;
  border: 1px solid #dcdfe6;

  /deep/.el-input__inner {
    border: none;
  }
  /deep/.styles{
    background-color: rgba(255,255,255,0);
    color: #E97170;
  }
}
</style>
